<!-- ============================================ -->
<!--                   Footer                     -->
<!-- ============================================ -->

<footer id="cs-footer-275">
    <div class="cs-container">
        <!-- Logo Group -->
        <div class="cs-logo-group">
            <a aria-label="go back to home" class="cs-logo" href="/">
                <img class="cs-logo-img" aria-hidden="true" loading="lazy" decoding="async" src="/assets/svgs/logo-light.svg" alt="logo" width="240" height="32">
            </a>
            <p class="cs-text">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi elementum tincidunt vitae velit dolor cras tellus nisl habitant. Consectetur pellentesque dignissim sed amet.
            </p>
            <div class="cs-social">
                <a class="cs-social-link" aria-label="visit google profile" href="{{ client.address.mapLink }}" target="_blank" rel="noopener">
                    <img class="cs-social-img" aria-hidden="true" loading="lazy" decoding="async" src="/assets/svgs/google.svg" alt="google" width="11" height="11">
                </a>
                <a class="cs-social-link" aria-label="visit facebook profile" href="{{ client.socials.facebook }}" target="_blank" rel="noopener">
                    <img class="cs-social-img" aria-hidden="true" loading="lazy" decoding="async" src="/assets/svgs/facebook.svg" alt="facebook" width="6" height="11">
                </a>
                <a class="cs-social-link" aria-label="visit instagram profile" href="{{ client.socials.instagram }}" target="_blank" rel="noopener">
                    <img class="cs-social-img" aria-hidden="true" loading="lazy" decoding="async" src="/assets/svgs/instagram.svg" alt="instagram" width="11" height="11">
                </a>
            </div>
        </div>
        <!-- Links -->
        <ul class="cs-nav">
            <li class="cs-nav-li">
                <span class="cs-header">Sitemap</span>
            </li>
            <li class="cs-nav-li">
                <a class="cs-nav-link" href="/">Home</a>
            </li>
            <li class="cs-nav-li">
                <a class="cs-nav-link" href="/about/">About</a>
            </li>
            <li class="cs-nav-li">
                <a class="cs-nav-link" href="/reviews/">Reviews</a>
            </li>
            <li class="cs-nav-li">
                <a class="cs-nav-link" href="/blog/">Blog</a>
            </li>
            <li class="cs-nav-li">
                <a class="cs-nav-link" href="/contact/">Contact</a>
            </li>
        </ul>
        <ul class="cs-nav">
            <li class="cs-nav-li">
                <span class="cs-header">Projects</span>
            </li>
            <li class="cs-nav-li">
                <a class="cs-nav-link" href="/project-one/">Project One</a>
            </li>
            <li class="cs-nav-li">
                <a class="cs-nav-link" href="/project-two/">Project Two</a>
            </li>
        </ul>
        <!-- Contact Info -->
        <ul class="cs-contact">
            <li class="cs-nav-li">
                <span class="cs-header">Contact</span>
            </li>
            <li class="cs-contact-li">
                <a class="cs-contact-link cs-address" href="{{ client.address.mapLink }}" target="_blank" rel="noopener">
                    {{ client.address.lineOne }}, <br>
                    {{ client.address.lineTwo }}, <br>
                    {{ client.address.city }}, {{ client.address.state }}
                    {{ client.address.zip }}
                </a>
            </li>
            <li class="cs-contact-li">
                <a class="cs-contact-link" href="tel:{{ client.phoneForTel }}">{{ client.phoneFormatted }}</a>
            </li>
            <li class="cs-contact-li">
                <a class="cs-contact-link" href="mailto:{{ client.email }}">{{ client.email }}</a>
            </li>
        </ul>
    </div>
</footer>